$(function(){
	//控制变量
	var c=0;
	//顺时针轮播
	function run(){
		c++;
		if (c==$('.mid .loopPic img').length) {//找到共有几张图片
			c=0;
		}
		$('.mid .loopPic img').hide();//所有图片都隐藏
		$('.mid .loopPic img').eq(c).show();//eq是抓取第C张图片，然后显示该图片
		// 随着图片的轮播，改变背景颜色
		$('.background1 div').hide();
		$('.background1 div').eq(c).show();
		//改变点的颜色
		$('.mid .loopPic ul li').css({'background':'#fff'});
		$('.mid .loopPic ul li').eq(c).css({'background':'red'});
	}
	//逆时针轮播
	function reversRun(){
		c--;
		if (c==-1) {//找到共有几张图片
			c=$('.mid .loopPic img').length-1;
		}
		$('.mid .loopPic img').hide();//所有图片都隐藏
		$('.mid .loopPic img').eq(c).show();//eq是抓取第C张图片，然后显示该图片
		$('.background1 div').hide();
		$('.background1 div').eq(c).show();
		
	}

	//定时器
	timer=setInterval(run,2000);

	//点击切换图片
	//上一张
	$('.mid .loopPic .prev').click(function(){
		clearInterval(timer);
		reversRun();
	    timer=setInterval(run,2000);
	})
	//下一张
	$('.mid .loopPic .next').click(function(){
		clearInterval(timer);
		run();
		timer=setInterval(run,2000);
	})

	//圆点切换
	
	//鼠标移入切换当前图片
	for (var i = 0; i < $('.mid .loopPic ul li').length; i++) {
		$('.mid .loopPic ul li').eq(i).attr('ind',i);//eq是一个函数，attr给一个值是获取，给两个值是设置。
	}
	//鼠标进入圆点，切换到该图片
	$('.mid .loopPic ul li').mouseenter(function(){
		clearInterval(timer);
		var num=$(this).attr('ind');
		c=num-1;
		// run();
		bomb=setTimeout(run,300);//定时炸弹boom!boom!boom!
	})

	$('.mid .loopPic ul li').mouseleave(function(){
		clearTimeout(bomb);
		timer=setInterval(run,2000);
	})

})